<template>
	<div class="content">
		<scroll-view class="scroll-view_H tab" scroll-x="true" @scroll="scroll" scroll-left="120">
			<span class="label" v-for="(item,idx) in newsCateList" :key="idx" :class="{current:tabIndex == idx}" @click="changeTab(idx)">{{ item.name }}</span>
		</scroll-view>
		<div class="anchor">
			<div class="list" v-for="item in newsListData" :key="item.id" @click="toDetail(item)">
				<div class="desc">{{ item.title }}</div>
				<img class="pic" :src="item.logo" alt="">
			</div>
		</div>
	</div>
</template>

<script>
	import request from '../../utils/request'

	export default {
		components:{
		},
		data() {
			return {
				tabIndex:0,
				newsListData:[],
				newsCateList:[],
				cate_id:undefined
			}
		},
		async onLoad() {
			await this.getAnchorlist()
			await this.getNewsList()
		},
		methods: {
			async getNewsList(){
				const resData = await request('api/news/newsList', 'post', {cate_id:this.cate_id,is_index:''});
				this.newsListData = resData.data
			},

			//获取新闻列表
			async getAnchorlist(){
				const resData = await request('api/news/newsCateList', 'post', {});
				this.newsCateList = resData.data
				this.cate_id = this.newsCateList[this.tabIndex].id

			},
			changeTab(idx){
				this.tabIndex = idx
				this.cate_id = this.newsCateList[this.tabIndex].id
				this.getNewsList()
			},
			toDetail(item){
				uni.navigateTo({
					url: '/pages/news/detail?id='+item.id
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		padding: 18px 0;
		.wrap {
			background: linear-gradient( 180deg, #FFDCDD 0%, #FFFFFF 40%);
			border-radius: 28px 28px 0px 0px;
			margin-top: 20px;
			padding: 18px 15px;
			.tab-check {
				display: flex;
				.tab-current {
					background: #FFADA9;
				}
				.tab {
					width: 61px;
					height: 28px;
					border-radius: 100px 100px 100px 100px;
					border: 2px solid #000000;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 12px;
				}
			}
		}
		.tab {
			display: flex;
			.label {
				margin: 0 15px;
				color: #8C8C8C;
				font-size: 14px;
			}
			.current {
				color: #000000;
				position: relative;
				&:after {
					content: '';
					position: absolute;
					bottom:0;
					left: 0;
					width: 100%;
					height: 8px;
					background: linear-gradient( 270deg, rgba(255,54,54,0.6) 0%, rgba(255,103,70,0.6) 100%);
				}
			}
		}
	}
	.anchor {
		padding: 20px 20px;
		border-radius: 28px 28px 0px 0px;
		margin-top: 30px;
		background: url('/static/zhubobg.png') center top no-repeat;
		background-size: contain;
		min-height: 100vh;
		.list {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #F5F5F5;
			padding: 20px 0;
			.desc {
				font-size: 14px;
				color: #212121;
				width:60%;
			}
			.pic {
				width: 96px;
				height: 70px;
				border-radius: 12px;
				border: 2px solid #000;
			}
		}
	}

</style>
